<template>
	<div class="comment-title">
		<div class="comment-area">
			<img class="avatar" :src="userinfo.user_img" alt="" v-if="userinfo.length">
			<img class="avatar" src="../../assets/images/default_img.jpg" alt="" v-else>
			<div class="input">
				<van-field 
					 v-model="value"
					 placeholder="说点什么吧"
					 @focus="focus"
				>
				 <template #button>
				    <van-button size="small" color="#fb7299" text="发送" @click="reply"/>
				  </template>
				</van-field>
			</div>
		</div>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	export default {
		data() {
			return {
				value: ''
			}
		},
		methods: {
			focus() {
				if (!this.userinfo || !window.localStorage.getItem('token') || !window.localStorage.getItem('id')) return this.$toast('请先登录')
			},
			// 发表评论
			reply() {
				if (!this.value.trim()) return this.$toast('内容不能为空！')
				// 发送通知我提交了评论
				bus.$emit('PostComment', this.value.trim())
			}
		},
		props: {
			// 用户信息
			userinfo: {
				type: Object,
				default() {
					return {}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comment-title{
		padding: 12px;
		.comment-area{
			display: flex;
			align-items: center;
			.avatar{
				display: block;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin-right: 10px;
			}
			.input{
				flex: 1;
				.van-field{
					padding: 0;
					height: 26px;
					line-height: 26px;
					background-color: #f4f4f4;
					border-radius: 13px;
					/deep/ .van-field__control{
						padding: 0 10px;
					}
					/deep/ .van-field__button{
						height: 26px;
						line-height: 26px;
						margin-top: -10px;
						.van-button{
							height: 26px;
							line-height: 26px;
						}
					}
				}
			}
		}
	}
</style>